<template>
    <h1 class="title" @click="refresh">{{ value }}</h1>
</template>

<script setup>
import { ref } from 'vue'
import { useFavicon, useColor } from '@/utils'

let props = defineProps({
    value: String
})
let value = ref(props.value)

const { toggle: toggleFavicon } = useFavicon()
const { color, change: changeColor } = useColor()
function refresh() {
    toggleFavicon()
    changeColor()
}
</script>

<style scoped>
h1 {
    color: v-bind(color);
    cursor: pointer;
    user-select: none;
}
</style>